<template>
  <div class="inner-left">
    <h2>LEFT --- {{ countFromRight }}</h2>
    <my-count ref="countRef" :init="9" :retryBtnFlag="true"></my-count>
  </div>
</template>

<script>

// 1.导入 eventBus.js 模块
import eventBus from '@/components/eventBus'

export default {
  name: 'Left',
  data () {
    return {
      countFromRight: 0,
    }
  },
  created () {
    // $('h2').on('click', () => {}) --> jQuery中 on 方法都是用来绑定事件的!!!
    // 2.在数据接收方, 调用bus.$on('事件名称', 事件处理函数)方法注册一个自定义事件
    eventBus.$on('share', (val) => {
      console.log('share 事件被触发了!', val)
      this.countFromRight = val
    })
  }
}
</script>


<!-- scoped解决了单页面中的样式冲突问题 -->
<!-- 底层原理: 使用了属性选择器
      style使用了scoped, 会给当前的所有组件标签加一个相同自定义属性 data-v-xxx
      然后选择器寻找元素的时候, 会自动加上自定义属性  h3[data-v-xxx]
-->
<style lang="less" scoped>
// 实现需求: 只想在这个Left组件中改变子组件my-count的样式, 而不改变其他地方my-count的样式
// /deep/ 使用场景
// 当使用第三方组件的时候, 如果有修改组件默认样式的需求, 需要用到 /deep/
//                       使用style行内样式, 也可以修改第三方组件默认样式
/deep/ h5 {
  color: red;
}

/*
/deep/ h5 { xxx } --> 实际效果  [data-v-3c83f0b7] h5 { xxx }
[data-v-3c83f0b7] h5 { xxx } 是一个后代选择器, 选择属性[data-v-3c83f0b7]
*/
</style>
